<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="color-scheme" content="light dark">
    <meta name="referrer" content="no-referrer" />

    <link
      rel="stylesheet"
      type="text/css"
      href="chrome://global/skin/in-content/common.css"
    />
    <link rel="stylesheet" href="chrome://global/skin/global.css" />
    <link
      rel="stylesheet"
      href="chrome://browser/content/zen-welcome/welcome.css"
    />

    <link rel="localization" href="branding/brand.ftl" />
    <link rel="localization" href="browser/zen-welcome.ftl" />

    <script src="chrome://browser/content/zenThemeModifier.js"></script>
  </head>
  <body class="gradient-background">
    <div id="first-view">
      <div class="page" id="welcome">
        <img class="icon" src="chrome://branding/content/about-logo.png" />
        <h1 data-l10n-id="welcome-dialog-welcome"></h1>
  
        <p data-l10n-id="welcome-dialog-welcome-subtext"></p>

      </div>
  
      <div class="page page-split" id="import">
        <div>
          <h1 data-l10n-id="welcome-dialog-import"></h1>
          <p data-l10n-id="welcome-dialog-import-subtext"></p>
        </div>
        <div>
          <hbox>
            <button
              class="primary"
              id="importBrowser"
              data-l10n-id="welcome-dialog-import-action"
            ></button>
          </hbox>
        </div>
      </div>
  
      <div class="page page-split" id="theme">
        <div>
          <h1 data-l10n-id="welcome-dialog-theme"></h1>
          <p data-l10n-id="welcome-dialog-theme-subtext"></p>
        </div>
        <div>
          <h2 data-l10n-id="welcome-dialog-theme-header-1"></h2>
          <div id="colorListWrapper">
          </div>
          <h2 data-l10n-id="welcome-dialog-theme-header-2"></h2>
          <div id="themeList" class="cardGroup">
            <svg viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_404_2706)">
              <rect width="700" height="700" fill="#F4F4F4"/>
              <g filter="url(#filter0_d_404_2706)">
              <path d="M107 130C107 103.49 128.49 82 155 82H700V738H107V130Z" fill="white"/>
              <path d="M155 82.5H699.5V737.5H107.5V130C107.5 103.766 128.766 82.5 155 82.5Z" stroke="black" stroke-opacity="0.2"/>
              </g>
              <mask id="path-3-inside-1_404_2706" fill="white">
              <path d="M257 83H700V701H257V83Z"/>
              </mask>
              <path d="M257 83H700V701H257V83Z" fill="#F1F1F1"/>
              <path d="M258 701V83H256V701H258Z" fill="black" fill-opacity="0.1" mask="url(#path-3-inside-1_404_2706)"/>
              </g>
              <defs>
              <filter id="filter0_d_404_2706" x="103" y="82" width="601" height="664" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
              <feOffset dy="4"/>
              <feGaussianBlur stdDeviation="2"/>
              <feComposite in2="hardAlpha" operator="out"/>
              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_404_2706"/>
              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_404_2706" result="shape"/>
              </filter>
              <clipPath id="clip0_404_2706">
              <rect width="700" height="700" fill="white"/>
              </clipPath>
              </defs>
            </svg>
            <svg viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_404_2709)">
              <rect width="700" height="700" fill="#515151"/>
              <g filter="url(#filter0_d_404_2709)">
              <path d="M107 130C107 103.49 128.49 82 155 82H700V727H107V130Z" fill="#717171"/>
              <path d="M155 82.5H699.5V726.5H107.5V130C107.5 103.766 128.766 82.5 155 82.5Z" stroke="white" stroke-opacity="0.57"/>
              </g>
              <mask id="path-3-inside-1_404_2709" fill="white">
              <path d="M257 83H700V701H257V83Z"/>
              </mask>
              <path d="M257 83H700V701H257V83Z" fill="#565656"/>
              <path d="M258 701V83H256V701H258Z" fill="black" fill-opacity="0.1" mask="url(#path-3-inside-1_404_2709)"/>
              </g>
              <defs>
              <filter id="filter0_d_404_2709" x="103" y="82" width="601" height="653" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
              <feOffset dy="4"/>
              <feGaussianBlur stdDeviation="2"/>
              <feComposite in2="hardAlpha" operator="out"/>
              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_404_2709"/>
              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_404_2709" result="shape"/>
              </filter>
              <clipPath id="clip0_404_2709">
              <rect width="700" height="700" fill="white"/>
              </clipPath>
              </defs>
            </svg>                
          </div>
        </div>
      </div>
  
      <div class="page page-split" id="search">
        <div>
          <h1 data-l10n-id="welcome-dialog-search"></h1>
          <p data-l10n-id="welcome-dialog-search-subtext"></p>
        </div>
        <div>
          <div id="searchList" class="cardGroup"></div>
        </div>
      </div>
  
      <div class="page" id="thanks">
        <h1 data-l10n-id="welcome-dialog-thanks"></h1>
        <p data-l10n-id="welcome-dialog-thanks-subtext"></p>
      </div>
      <div id="buttons-footer">
        <button
          id="back"
          data-l10n-id="welcome-dialog-back-action"
          disabled
        ></button>
        <button
          id="next"
          class="primary"
          data-l10n-id="welcome-dialog-next-action"
        ></button>
      </div>
    </div>

    <div id="second-view">

    </div>

    <svg
      width="250" height="250" viewBox="0 0 250 250"
      id="circular-progress" style="--progress: 50"
    >
      <circle class="bg"></circle>
      <circle class="fg"></circle>
    </svg>

    <script src="./welcome.js"></script>
    <script src="chrome://browser/content/contentTheme.js"></script>
  </body>
</html>
